<template>
  <div class="HCM">
    <!-- nav部分 -->
    <hcmnav></hcmnav>
    <hr />
    <!-- 数据筛选 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix" shadow="never">
        <span>数据筛选</span>
        <el-button
          style="float: right; padding: 3px 0"
          type="text"
          @click="advancedSearch"
          >高级搜索</el-button
        >
      </div>
      <div>
        <span>栏目名称:</span>
        <el-input placeholder="用户编号"></el-input>
        <span class="int_right">栏目状态:</span>
        <el-input placeholder="请输入会员姓名"></el-input>
        <el-button style="margin: 0 20px" type="primary" icon="el-icon-search"
          >查询</el-button
        >
      </div>
    </el-card>

    <!-- 高级搜索(advancedSearch) -->
    <el-dialog
      title="高级搜索"
      :visible.sync="centerDialogVisible"
      width="40%"
      top="5vh"
    >
      <hcmsearch></hcmsearch>
      <span slot="footer" class="dialog-footer">
        <el-button
          style="padding: 3px 0; margin: 0 16px 0 0; font-weight: 900"
          type="text"
          >高级搜索</el-button
        >
        <el-button
          @click="centerDialogVisible = false"
          style="color: #0079fe; font-weight: bloder; border: 1px solid #0079fe"
          >取 消</el-button
        >
        <el-button
          style="font-weight: bloder"
          type="primary"
          @click="centerDialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- 数据列表 -->
    <el-card class="box-card-table">
      <div slot="header" class="clearfix" shadow="never">
        <span>数据筛选</span>
      </div>
      <div>
        <hcmbannertable></hcmbannertable>
      </div>
    </el-card>
  </div>
</template>

<script>
import hcmnav from "../../components/HomeColumnManagement/HCMnav.vue";
import hcmsearch from "../../components/HomeColumnManagement/HCMsearch.vue";
import hcmbannertable from "../../components/HomeColumnManagement/HCMbannerTable.vue";
export default {
  data() {
    return {
      centerDialogVisible: false,
      value: "",
    };
  },
  components: {
    hcmnav,
    hcmsearch,
    hcmbannertable,
  },
  methods: {
    advancedSearch() {
      this.centerDialogVisible = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.HCM {
  width: 100%;
  margin: 20px auto;
}
/* 数据筛选 */
.text {
  font-size: 14px;
}
.el-card__header {
  font-weight: 900;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 90%;
  margin: 20px auto;
}
.el-button--text {
  font-weight: 900;
}
.el-input {
  width: 20%;
  margin: 0 0 0 20px;
}
.int_right {
  margin-left: 40px;
}
/* 高级搜索 */
.HCM ::v-deep .el-dialog {
  margin-left: 567px;
}
.el-dialog__headerbtn .el-dialog__close {
  font-weight: 900;
  color: #999999;
}
.el-dialog .el-dialog__title {
  font-weight: 900;
  margin: 10px 0;
}
.HCM ::v-deep .el-dialog__header {
  border-bottom: 1px solid #e4e4e4;
  padding: 10px 20px 8px 15px;
  background-color: #f2f2f2;
}

.HCM ::v-deep .el-dialog {
  height: 750px;
}
.HCM ::v-deep .el-dialog__footer {
  margin: -25px 0 0 0;
}

/* 卡片-表格部分 */
.box-card-table {
  width: 90%;
  margin: 20px auto;
}
</style>